<template>
  <div class="category-wrap">
    <div class="nav-common-title">
      <i class="el-icon-tickets"></i>
      <span>类目列表</span>
    </div>
    <ul class="nav-common-content category-list">
      <li
        class="category-item"
        :class="{ active: store.currentTypeId === 0 }"
        @click="store.setTypeId(0)"
      >
        <div class="category-item--info">
          <i class="el-icon-tickets"></i>全部
        </div>
        <div class="category-item--count">
          <el-icon style="vertical-align: middle">
            <ArrowRight></ArrowRight>
          </el-icon>
          <!--          <i class="el-icon-arrow-right"></i>-->
        </div>
      </li>
      <li
        class="category-item"
        v-for="(item, index) in store.typeList"
        :key="item + index"
        :class="{ active: store.currentTypeId === item.id }"
        @click="handleCategoryClick(item)"
      >
        <div class="category-item--info">
          <i class="el-icon-tickets"></i>关于{{ item.type }}
        </div>
        <div class="category-item--count">{{ item.amount }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup type="ts">
import { useMainStore } from "../../store";
import { useRouter } from 'vue-router'
const router = useRouter();
const store = useMainStore();

// 点击分类标签
const handleCategoryClick = (item) => {
  store.setTypeId(item.id)
  router.push({ name: 'Home' })
}
</script>

<style lang="less" scoped>
.category-wrap {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #eee;

  .category-list {
    padding: 5px 0;

    .category-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 10px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      padding: 5px 15px;

      &.active {
        color: chocolate;
      }

      &:hover {
        background: #eee;
      }

      .category-item--info {
        display: flex;
        align-items: center;
        font-size: 14px;
        letter-spacing: 2px;

        i {
          font-size: 20px;
          margin-right: 10px;
        }
      }

      .category-item--count {
        width: 25px;
        height: 25px;
        border-radius: 5px;
        text-align: center;
        line-height: 25px;
        color: #999;
        background: #f5f5f5;
        font-size: 12px;
      }
    }
  }
}
</style>
